// 这是把图片懒加载方法写成了一个插件的形式  现在需要去入口文件main.js里面 去引入这个插件

// 这里是图片懒加载功能 用来判断图片是否出现在可视窗口  引用vueUse插件里的这个功能
import { useIntersectionObserver } from '@vueuse/core'

// 定义图片懒加载方法
//  export const lazyPlugin = {
//   // 提供一个方法 这个方法是固定的
//   install(app){
//     // 这里来完成实现图片懒加载那个功能要做的事
//     // 定义全局指令 app.directive('要使用的名字'，{}) 
//     // 在组件里使用时 必须是 v-要使用的名字  例如这里就是 v-img-lazy
//     // 编写懒加载指令
//     app.directive('img-lazy',{
//       mounted(el,binding){
//         // el:指定绑定的那个元素  这里是指img
//         // binding： binding.value 指令等于号后面绑定的表达式的值  这里指 图片url
//         // 去组件里使用v-img-lazy 然后看这个打印是否成功
//         // console.log(el,binding.value);
//         // 打印成功后，我们要判断图片是否出现在视图区域  可以使用vueuse插件里面的 useIntersectionObserver监听方法 
//         const { stop } = useIntersectionObserver(
//           // 这个是 你要监听谁就传谁 这里是监听图片 就是上面的el
//           el,
//           // isIntersecting是一个布尔值 监听我们的el 是否进入可视区域
//           ([{ isIntersecting }]) => {
//             // 打印看看el是否进入可视区域
//             console.log(isIntersecting); //显示 false或者true
//             // 然后我们需要加入一个 条件 就是如果图片进入可视区域了 我们就让图片加载出来
//             if(isIntersecting){
//               // 就将图片  加载
//               el.src = binding.value
//               // 第一次监听完成加载后 就该停止监听  不然造成重复监听造成内存浪费 
//               stop()
//             }
//           },
//         )
//       }
//     })
//   }
// }

 export const lazyPlugin = {
  install(app){
    // 完整写一遍 图片懒加载 1.写个空指令  2.实现可视视图图片加载
    app.directive('img-lazy',{
      mounted(el,binding){
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            console.log(isIntersecting); //显示 false或者true
            if(isIntersecting){
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}

